<template>
	<div class="CustomerList" :style="viewColor">
		<!-- 系统消息 -->
		<view class="system-notice">
			<div class="item acea-row" @click="goSysPage()">
				<view class="logo">
					<image :src="systemChatLogo" v-if="systemChatLogo" />
					<image src="/static/images/f.png" v-else mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">{{systemChatName}}</view>
					<!-- <view class="con line1"></view> -->
				</view>
				<view class="right-box">
					<!-- <view class="time-num-box">
						<view class="time"></view>
						<view class="num"></view>
					</view> -->
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</div>
		</view>
		<!-- 其他消息列表 -->
		<view class="list-box">
			<block v-if="type == 0 && list.length>0" v-for="(item,index) in list" :key="index">
				<div class="item acea-row" @click="goPage(item)">
					<view class="logo" v-if="item.user_info">
						<image :src="item.user_info.user_avatar" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name">{{item.user_info ? item.user_info.user_name : ''}}</view>
						<view class="con line1" v-if="item.last && (item.last.msn_type == 1)">{{item.last.msn}}</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 2">[表情]</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 3">[图片]</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 4">[商品]</view>
						<view class="con line1" v-if="item.last && (item.last.msn_type == 5 || item.last.msn_type == 6)">[订单]</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 9 || item.last.msn_type == 10 || item.last.msn_type == 13">[问诊]</view>
						<view class="con line1" v-if="item.last && (item.last.msn_type == 11 || item.last.msn_type == 12)">[通话]</view>
					</view>
					<view class="right-box">
						<view class="time-num-box">
							<view class="time">{{item.last && item.last.create_time.split(' ')[1]}}</view>
							<view class="num" v-if="item.num>0">{{item.num}}</view>
						</view>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</div>
			</block>
			<block v-if="type == 1 && list.length>0" v-for="(item,index) in list" :key="index">
				<div class="item acea-row" @click="goPage(item)">
					<view class="logo">
						<image :src="item.user.avatar ? item.user.avatar : '/static/images/f.png'" mode="aspectFill">
						</image>
					</view>
					<view class="info">
						<view class="name">{{item.user.nickname}}</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 1">{{item.last.msn}}</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 2">[表情]</view>
						<view class="con line1" v-if="item.last && item.last.msn_type == 3">[图片]</view>
						<view class="con line1" v-if="item.last && (item.last.msn_type == 4 || item.last.msn_type == 7)">[商品]</view>
						<view class="con line1" v-if="item.last && (item.last.msn_type == 5 || item.last.msn_type == 6)">[订单]</view>
					</view>
					<view class="right-box">
						<view class="time-num-box">
							<view class="time">{{item.last && item.last.create_time.split(' ')[1]}}</view>
							<view class="num" v-if="item.num>0">{{item.num}}</view>
						</view>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</div>
			</block>
			<block v-if="list.length == 0">
				<emptyPage title="暂无数据~"></emptyPage>
			</block>
		</view>
	</div>
</template>
<script>
	import emptyPage from '@/components/emptyPage.vue'
	import {
		serviceList,
		serviceUserList,
		serviceInquiryListList,
		getUserInfo,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import {
		configMap
	} from "@/utils";
	import {
		getConversationStatus
	} from '@/api/inquiry.js';
	import {
		getconfig
	} from "@/api/public";
	export default {
		name: "CustomerList",
		components: {
			emptyPage
		},
		data() {
			return {
				list: [],
				productId: 0,
				orderId: "",
				type: 0, // 0 客服列表 1用户列表
				timer: null,
				page: 1,
				limit: 9999,
				loading: false,
				clear: false,
				systemChatLogo: '',
				systemChatName: '在线客服',
				is_show:0,
			};
		},
		computed: {
			...mapGetters(['isLogin', 'viewColor','routeError']),
		},
		onLoad() {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			this.getSysConfig();

			this.isLogin && this.getList()
		},
		onPullDownRefresh() {
			// console.log('rk==>refresh')
			if(!this.isLogin){
				uni.stopPullDownRefresh();
			}
			this.isLogin && this.getList()
		},
		onShow(option) {
			this.isLogin && this.liveUpdate();
			this.isLogin && this.getUserInfo();
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			this.clear = true;
			
			// console.log('onHide==>[hide]'+JSON.stringify(this.timer));
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			this.clear = true;
			
			// console.log('onHide==>[unload]'+JSON.stringify(this.timer));
		},
		methods: {
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.is_show = res.data.is_show;
				});
			},
			getSysConfig() {
				getconfig().then(res => {
					this.systemChatLogo = res.data.login_logo;
					this.systemChatName = res.data.site_name;
				})
			},
			getList() {
				this.loading = true;
				// 问诊列表
				let that = this
				serviceInquiryListList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					that.list = res.data.list;
					console.log(that.list)
					// console.log('rk==>[res]' + JSON.stringify(res));
					// console.log("rk===>[list]" + JSON.stringify(this.list));
					
				}).finally(v => {
					this.loading = false;
					uni.stopPullDownRefresh();
					this.calculationNums();
				});
			},
			/**
			 * 计算角标
			 */
			calculationNums() {
				let num = 0
				this.list.forEach((item, index) => {
					num += Number(item.num);
				})
				// console.log('rk==>[总数]' + num);
				let showStr = String(num);
				if (num == 0) {
					uni.removeTabBarBadge({
						index: 2
					})
				} else {
					uni.setTabBarBadge({
						index: 2,
						text: showStr
					})
				}
			},

			//实时刷新列表
			liveUpdate() {
				let that = this;
				this.clear = false;
				if (that.timer) {
					clearInterval(that.timer);
					that.timer = null;
				}
				that.timer = setInterval(function() {
					if (that.clear) {
						clearInterval(that.timer);
						return;
					}
					// 用户
					(!that.loading) && that.getList();
				}, 5000);

			},
			goPage(item) {
				item.num = 0;
				this.calculationNums();
				console.log(item)
				if (!item.last || !item.last.conversation_id) {
					return this.$util.Tips({
						title: '获取会话状态失败'
					});
				}
				let lastMsg = item.last;
				let where = {
					'conversation_id': lastMsg.conversation_id,
				}
				let that = this;
				getConversationStatus(where).then(res => {
					if (res.status == 200) {
						let resData = res.data;
						that.jumpUrl(item,lastMsg,resData);
					} else {
						that.$util.Tips({
							title: res.message
						})
					}
				}).catch(err => {
					// console.log('rk===>' + JSON.stringify(err))
					that.$util.Tips({
						title: err
					});
				});
			},
			jumpUrl(item,lastMsg,resData) {
				
				// status:0-问诊中  1-已完成
				let status = resData.info;
				// type:0-图文  1-在线  2-视频
				let conversition_type = resData.type
				// can_refund: 1-能取消  0-不能取消【当type=2时有效】
				let can_refund = resData.can_refund;
			
				// let yyMerId = uni.getStorageSync('YY_Mer_Id');
				let yyMerId = lastMsg.mer_id;
				
				let roleStr = '';
				if(item.is_show == 1) {
					roleStr = '&role=doctor';
				}
				uni.navigateTo({
					url: '/pages/chat/customer_list/chath5?conversation_id=' 
					+ lastMsg.conversation_id 
					+'&conversation_status=' + status 
					+'&mer_id='+yyMerId 
					+ roleStr
					+'&conversition_type=' + conversition_type
					+'&can_refund=' + can_refund
				});
			},
			goSysPage() {
				
				if(this.is_show == 1){
					return this.$util.Tips({
						title: '医生、医助暂无法发起会话'
					});
				}
				uni.navigateTo({
					url: `/pages/chat/customer_list/chat?mer_id=0`
				})
			}
		},
		
	};
</script>
<style lang="scss">
	.CustomerList {

		.list-box {
			margin-top: 30rpx;
		}

		.system-notice {}

		.spin {
			display: block;
			transform: rotate(180deg);
			font-size: 36rpx;
		}

		.popupn {
			position: fixed;
			width: 100%;
			text-align: center;
			top: 0;
			left: 0;
			background: #ffffff;
			height: 90rpx;
			line-height: 90rpx;
			z-index: 100;

			.title {
				max-width: 560rpx;
				margin: 0 auto;
				position: relative;
			}

			.iconfont {
				display: inline-block;
				position: relative;
				top: 4rpx;
				right: 0;
			}

			.mer_logo {
				width: 34rpx;
				height: 34rpx;
				position: relative;
				top: 6rpx;
				right: 10px;
			}

			.mer_name {
				display: inline-block;
				max-width: 650rpx;
			}

			.invoice-content {
				background-color: #ffffff;
			}
		}

		.list_count {
			margin-top: 104rpx;
		}

		.item {
			align-items: center;
			border-bottom: 1px solid #eee;
			padding: 20rpx 30rpx;
			background-color: #fff;

			.logo image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}

			.info {
				width: 334rpx;
				margin-left: 20rpx;

				.con {
					margin-top: 10rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			.right-box {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 20rpx;
				color: #BBBBBB;

				.time-num-box {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					margin-right: 10rpx;
				}

				.time {
					margin-bottom: 10rpx;
				}

				.num {
					min-width: 15px;
					height: 15px;
					text-align: center;
					background-color: var(--view-theme);
					border-radius: 15px;
					font-size: 10px;
					padding: 0 4px;
					font-size: 20rpx;
					color: #fff;
				}
			}
		}
	}
</style>